<template>
	<view class="vi_searchbar">
		<view class="vi_searchbar_searchBtn" v-if="['outsideLeft','outsideRight'].includes(setting.buttonStyle)"
			:style="{'order':setting.buttonStyle=='outsideLeft'?1:2}">
			<!-- 外部按钮 -->
			<vi-button
				compName="searchbar"
				:type="setting.type"
				:color="color"
				:textColor="textColor"
				:size="setting.size"
				:width="setting.buttonWidth"
				:height="setting.height+'em'"
				borderWidth="0"
				:radius="outsideRadius"
				:disabled="disabled"
				:readOnly="readOnly"
				@click="doSearch">{{textSetting.search}}</vi-button>
		</view>
		<view class="vi_searchbar_searchBox"
			:style="{'order':setting.buttonStyle=='outsideLeft'?2:1}">
			<vi-style-controller
				compName="searchbar"
				:control="plain?'border':'background'"
				:type="setting.type"
				:color="color"
				:radius="inputRadius"
				:size="setting.size"
				:borderWidth="plain?'1px':'0'"
				borderBox
				:height="setting.height+'em'"
				:backgroundColor="plain?'':setting.bgColor"
				:active="plain?true:false"
				:disabled="disabled"
				:readOnly="readOnly">
				<view class="vi_searchbar_inputBox" :style="setting.buttonStyle=='insideRight'?'padding-right:0;':''">
					<!-- 内部按钮 -->
					<view class="vi_searchbar_searchBtn" v-if="['insideLeft','insideRight'].includes(setting.buttonStyle)"
						:style="{'order':setting.buttonStyle=='insideLeft'?1:3}">
						<vi-button
							compName="searchbar"
							:type="setting.type"
							:color="color"
							:textColor="textColor"
							:size="setting.size"
							:width="setting.buttonWidth"
							:height="setting.height+'em'"
							borderWidth="0"
							:radius="R"
							:disabled="disabled"
							:readOnly="readOnly"
							@click="doSearch">{{textSetting.search}}</vi-button>
					</view>
					<!-- 左图标灰 -->
					<view class="vi_searchbar_addon" v-if="['active','outsideRight','insideRight'].includes(setting.buttonStyle)"
						:style="{'order':1}">
						<vi-style-controller
							control="text"
							:type="setting.type"
							:color="color"
							:disabled="disabled"
							:readOnly="readOnly">
							<view class="iconfont" :class="iconSetting.search"></view>
						</vi-style-controller>
					</view>
					<!-- 左图标激活 -->
					<view class="vi_searchbar_addon" v-if="['iconLeft','iconRight'].includes(setting.buttonStyle)" @click="doSearch"
						:style="{'order':setting.buttonStyle=='iconLeft'?1:3}">
						<vi-style-controller
							control="text"
							:type="setting.type"
							:color="color"
							:textColor="textColor"
							:disabled="disabled"
							:readOnly="readOnly"
							active>
							<view class="iconfont" :class="iconSetting.search"></view>
						</vi-style-controller>
					</view>
					<!-- 输入框 -->
					<view class="vi_searchbar_input">
						<input v-model="keyword"
							:placeholder="disabled||readOnly?'':setting.placeholder"
							:disabled="disabled||readOnly"
							@input="onInput" />
					</view>
				</view>
			</vi-style-controller>
		</view>
	</view>
</template>

<script>
	export default {
		name:"viSearch",
		model:{
			prop:"value",
			event:"input"
		},
		props: {
			type:{
				type:[String,null],
				default:null
			},
			color:{
				type:[String,null],
				default:""
			},
			textColor:{
				type:[String,null],
				default:""
			},
			radius:{
				type:[String,Number,null],
				default:null
			},
			size:{
				type:[String,null],
				default:null
			},
			//按钮宽，单位em
			buttonWidth:{
				type:[Number,null],
				default:0
			},
			//搜索栏高，单位em
			height:{
				type:[Number,null],
				default:0
			},
			bgColor:{
				type:[String,null],
				default:null
			},
			plain:{
				type:[Boolean,null],
				default:false
			},
			placeholder:{
				type:[String,null],
				default:null
			},
			value:{
				type:[String,null],
				default:""
			},
			//搜索按钮样式，可选：
			//iconLeft内部左侧图标，iconRight内部右侧图标
			//outsideLeft外部左侧按钮，outsideRight外部右侧按钮
			//insideLeft内部左侧衔接按钮，insideRight内部右侧衔接按钮
			//active动态搜索(注意性能问题)
			buttonStyle:{
				type:[String,null],
				default:""
			},
			//初始自动搜索，有关键词时
			initSearch:{
				type:[Boolean,null],
				default:null
			},
			disabled:{
				type:[Boolean,null],
				default:false
			},
			readOnly:{
				type:[Boolean,null],
				default:false
			},
			icon:{
				type:[Object,null],
				default:()=>({})
			},
			text:{
				type:[Object,null],
				default:()=>({})
			},
		},
		data() {
			return {
				keyword:"",
				squareRate: 0.2,
				dicIcon:{
					search:"icon-search",
				},
				dicText:{
					search: "搜索",
					plcEnterKeyword: "请输入关键词"
				},
			}
		},
		computed: {
			textSetting(){
				if(this.$api.isObject(this.text)){
					return Object.assign({},this.dicText,this.text)
				}
				return this.dicText
			},
			//将默认值内含到css、计算属性等地方，只内含真值
			//规避特殊使用的情况下，由prop传入undefined、null等无效数据导致的，默认值失效问题。例如组件嵌套且需要组件间参数传递
			//HBuilder X3.3.13; 微信开发者工具stable 1.05.2111300
			//微信小程序会对传入的undefined、null值根据参数类型输出不同空值(false、""、null、0)，参数类型为null或未指定参数类型则输出null
			//H5会对传入的undefined取默认值，未设默认值则输出undefined。对传入的null值固定输出null
			//做参数传递时需警惕两者行为不同而造成的陷阱，主要问题出现在微信小程序的空值转化，输出非用户传入的空值、假值，使默认真值丢失
			//兼容空值取默认值的可行方案目前为，参数类型加入null如[Boolean,null]，判断传入参数是否为定义的类型，是则使用，否则赋予默认值
			setting(){
				return {
					type: this.$api.isDefined(this.type)? this.type :"primary",
					height: this.height ||2,
					buttonWidth: this.buttonWidth? this.buttonWidth+"em" :"5em",
					radius: this.$api.isDefined(this.radius)? this.radius :"circle",
					size: this.$api.isDefined(this.size)? this.size :"md",
					placeholder: this.$api.isDefined(this.placeholder)? this.placeholder :this.textSetting.plcEnterKeyword,
					buttonStyle: this.buttonStyle ||"iconRight",
					initSearch: this.$api.isBoolean(this.initSearch)? this.initSearch :true,
					bgColor: this.$api.isDefined(this.bgColor)? this.bgColor :"#eee",
					
				}
			},
			R(){
				let radius = this.setting.radius;
				if(radius =="circle"){
					return this.setting.height *0.5 +"em"
				}else if(radius =="square"){
					return this.setting.height *this.squareRate +"em"
				}
				return radius
			},
			iconSetting(){
				if(this.$api.isObject(this.icon)){
					return Object.assign({},this.dicIcon,this.icon)
				}
				return this.dicIcon
			},
			//外部按钮圆角
			outsideRadius(){
				let R = this.R;
				if(this.buttonStyle=="outsideLeft"){
					return [R,0,0,R]
				}else if(this.buttonStyle=="outsideRight"){
					return [0,R,R,0]
				}
				return R
			},
			//输入框圆角
			inputRadius(){
				let R = this.R;
				if(this.buttonStyle=="outsideLeft"){
					return [0,R,R,0]
				}else if(this.buttonStyle=="outsideRight"){
					return [R,0,0,R]
				}
				return R
			},
		},
		methods: {
			doSearch(){
				if(this.disabled||this.readOnly){
					return
				}
				this.$emit("search", this.keyword);
			},
			onInput(){
				this.$emit("input", this.keyword);
				if(this.setting.buttonStyle=="active" && !this.disabled && !this.readOnly){
					this.doSearch()
				}
			}
		},
		watch:{
			"value":{
				handler(newVal){
					this.keyword = newVal||"";
				}
			},
		},
		created() {
			this.keyword = this.value;
			//立即搜索
			if(this.keyword&&this.setting.initSearch){
				this.doSearch()
			}
		}
	}
</script>

<style lang="scss">
.vi_searchbar{
	flex-shrink: 0;
	display: flex;
	.vi_searchbar_searchBox{
		flex-grow: 1;
		.vi_searchbar_inputBox{
			width: 100%;
			height: 100%;
			padding: 0 0.5em;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			.vi_searchbar_searchBtn:first-child{
				margin-left: -0.5em;
			}
			.vi_searchbar_searchBtn:last-child{
				margin-right: -0.5em;
			}
		}
		.vi_searchbar_addon{
			padding: 0.45em 0.25em;
			flex-shrink: 0;
		}
		.vi_searchbar_input{
			order: 2;
			flex-grow: 1;
			padding: 0 0.5em;
		}
	}
	.vi_searchbar_searchBtn{
		flex-shrink: 0;
	}
}
</style>
